$section-border-width: 8px;
$section-padding: 10px;
$section-counter-padding: 10px;

$warning-border-width: 2px;
$warning-padding: 2px 10px;

article {
  counter-reset: section;
}

div.two-columns {
  @include media-breakpoint-up(md) {
    column-count: 2;
    column-gap: 2rem;

    margin-bottom: 1rem;

    p, pre {
      display: inline-block;
    }
  }
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  text-transform: uppercase;
}

h1, .h1 {
  font-family: $font-family-serif;
  font-weight: bolder;
  text-align: center;
  margin-top: 8rem;
}

section {
  counter-increment: section;
}

section h1, section .h1 {
  border: $section-border-width solid $black;
  font-family: $font-family-monospace;
  font-size: 2rem;
  font-weight: bolder;
  text-align: center;
  margin: 4rem auto 2rem;
  max-width: 34rem;
  padding: $section-padding;
  position: relative;

  &::before {
    content: "Section " counter(section, upper-roman);
    font-size: 1.2 * $font-size-base;
    font-weight: bolder;
    position: absolute;
    top: -1.5 * $section-padding;
    left: 2rem;
    padding: 0 $section-counter-padding;
    background-color: $white;
  }
}

section h2, section .h2 {
  font-weight: bold;
}

p {
  text-align: justify;

  &.disclaimer, &.warning {
    margin: 1rem auto;
    @each $breakpoint, $container-max-width in $container-max-widths {
      @include media-breakpoint-up($breakpoint) {
        max-width: max($container-max-width / 3 * 2, 34rem);
      }
    }
  }

  &.disclaimer {
    text-transform: uppercase;
    font-family: $font-family-sans-serif;
    font-weight: bold;
  }

  &.warning {
    &::before {
      content: "Warning";
      font-family: $font-family-sans-serif;
      font-weight: bolder;
      text-transform: uppercase;
      display: table;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 1rem;
      padding: $warning-padding;
      border: $warning-border-width solid $black;

      box-shadow: 1px 1px $black, 2px 2px $black, 3px 3px $black;
    }
  }
}

code {
  font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
}
